<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">

    <link rel="stylesheet" href="../css/index.css" />
</head>

<body>

    <h1>CSS 定位 (Positioning)</h1>

    <h2>参考链接</h2>
    <ul>
        <li><a target="_blank" href="https://www.w3school.com.cn/css/css_positioning.asp">CSS 定位 (Positioning)</a></li>
        <li><a target="_blank" href="https://www.runoob.com/css/css-positioning.html">CSS Position(定位)</a></li>
    </ul>

    <h2>摘抄</h2>
    <p>CSS 定位 (Positioning) 属性允许你对元素进行定位。</p>
    <p>定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。</p>

    <h2>CSS position 属性</h2>
    <ul>
        <li><strong>static</strong>	HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。</li>
        <li><strong>fixed</strong>	元素的位置相对于浏览器窗口是固定位置。</li>
        <li><strong>relative</strong> 相对定位元素的定位是相对其正常位置。</li>
        <li><strong>absolute</strong>	绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置是相对于html</li>
        <li><strong>sticky</strong>	粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;它会固定在目标位置。</li>
    </ul>
    

    <h2>效果参考</h2>

    <ul>
        <li><a target="_blank" href="https://www.runoob.com/try/try.php?filename=trycss_position_static">static</a></li>
        <li><a target="_blank" href="https://www.runoob.com/try/try.php?filename=trycss_position_fixed">fixed</a></li>
        <li><a target="_blank" href="https://www.runoob.com/try/try.php?filename=trycss_position_relative">relative</a></li>
        <li><a target="_blank" href="https://www.runoob.com/try/try.php?filename=trycss_position_absolute">absolute</a></li>
        <li><a target="_blank" href="https://www.runoob.com/try/try.php?filename=trycss_position_sticky">sticky</a></li>
    </ul>

</body>

</html>